import { useEffect } from "react";
import { Table, Pagination, Space, Divider, Modal, message, Tag } from "antd";
import { Button, Card as SemiCard } from "@douyinfe/semi-ui";
import { useReactive } from "ahooks";
import { useModel } from "umi";

import { AllRemovedMembers, RemovedMemberToNormal } from "../_graphql";

const { Column } = Table;

export default function AllMembersPage() {
    const { remoteData, windowInnerHeight, UTCTimeToLocal } = useModel("global");
    const { organizationUuid } = useModel("organization.info");

    const state = useReactive({
        loading: false,
        members: [],
        totalCount: 0,
        pageSize: 20,
        page: 1,
        modalVisible: false,
        modalContent: "",
        modalButtonLoading: false,
        selectedMember: {},
    });

    const loadMembers = async (first, offset) => {
        state.loading = true;
        let res = await remoteData({
            object: "multi-organization-gateway",
            serviceName: "/graphql/public_graphql_service",
            organizationUuid: organizationUuid,
            params: { query: AllRemovedMembers, variables: { first: first || state.pageSize, offset: offset || 0 } },
        });
        state.members = res?.a?.nodes || [];
        state.totalCount = res?.a?.totalCount || 0;
        state.loading = false;
    };

    useEffect(() => {
        organizationUuid && loadMembers();
    }, [organizationUuid]);

    // const handleOk = async (omIfim) => {
    //     state.modalButtonLoading = true;
    //     let res = await remoteData({
    //         object: "multi-organization-gateway",
    //         serviceName: "/graphql/public_graphql_service",
    //         organizationUuid: organizationUuid,
    //         params: { query: RemovedMemberToNormal, variables: { omUuid: state.selectedMember.omUuid, omIfim } },
    //     });
    //     if (res) {
    //         message.success(`成功把【${state.selectedMember.omName}】转为${omIfim ? "内部成员" : "外部成员"}`);
    //         state.modalContent = "";
    //         state.modalVisible = false;
    //         state.selectedMember = {};
    //         loadMembers();
    //     }
    //     state.modalButtonLoading = false;
    // };

    // const recertificationApply = async (record) => {
    //     state.selectedMember = record;
    //     state.modalContent = `确认要把【${record.omName}】转为组织成员吗？`;
    //     state.modalVisible = true;
    // };

    const cardBodyHeight = windowInnerHeight - 90 - 20 - 53 - 60;

    return (
        <SemiCard
            title={<span style={{ lineHeight: "32px", fontSize: 16, fontWeight: 600 }}>已移除成员列表</span>}
            headerExtraContent={<Button onClick={() => loadMembers()}>刷新</Button>}
            headerStyle={{ padding: "10px 14px" }}
            shadows="always"
            bordered={false}
            bodyStyle={{ padding: 0, height: cardBodyHeight }}
            footerStyle={{ padding: 0 }}
            footerLine={true}
            footer={
                <div style={{ padding: 14, display: "flex", justifyContent: "space-between" }}>
                    <div></div>
                    <Pagination
                        total={state.totalCount}
                        showTotal={(total, range) => `当前显示第 ${range[0]}-${range[1]} 条，共 ${total} 条`}
                        pageSize={state.pageSize}
                        current={state.page}
                        showSizeChanger={false}
                        onChange={(page, pageSize) => {
                            state.page = page;
                            loadMembers(pageSize, (page - 1) * pageSize);
                        }}
                    />
                </div>
            }
        >
            <Table loading={state.loading} bordered size="small" pagination={false} dataSource={state.members} rowKey="omUuid" scroll={{ y: cardBodyHeight - 40 }}>
                <Column title="序号" align="center" render={(_, r, i) => (state.page - 1) * state.pageSize + i + 1} width={80} />
                <Column title="成员姓名" dataIndex="omName" align="center" />
                <Column title="成员性别" dataIndex="omRoge" align="center" width={100} />
                <Column title="成员生日" dataIndex="omBirt" align="center" width={150} />
                <Column title="所属民族" dataIndex="omNati" align="center" width={100} />
                <Column title="原职位名称" dataIndex="omPosi" align="center" />
                <Column title="原外部组织名称" dataIndex="omEona" align="center" />
                <Column title="原加入原由" dataIndex="omCaus" align="center" width={360} />
                <Column title="原加入日期" dataIndex="omJoti" align="center" width={150} render={(_) => UTCTimeToLocal(_, "YYYY-MM-DD")} />
                <Column
                    title="成员状态"
                    dataIndex="omAust"
                    align="center"
                    render={(_) => {
                        //待认证，已认证，重新认证，自己退出，移除
                        let color;
                        if (_ === "待认证" || _ === "重新认证") color = "processing";
                        if (_ === "已认证") color = "success";
                        if (_ === "已退出" || _ === "已移除") color = "error";
                        return <Tag color={color}>{_}</Tag>;
                    }}
                />
                {/* <Column
                    title="操作"
                    align="center"
                    render={(_, record) => {
                        return (
                            <Space size={0} split={<Divider type="vertical" />}>
                                <a onClick={() => recertificationApply(record)}>重新认证</a>
                            </Space>
                        );
                    }}
                /> */}
            </Table>

            {/* <Modal
                title="确认窗口"
                open={state.modalVisible}
                onCancel={() => {
                    state.modalContent = "";
                    state.modalVisible = false;
                    state.modalButtonLoading = false;
                }}
                footer={[
                    <Button key="submit" type="primary" loading={state.modalButtonLoading} onClick={() => handleOk(true)}>
                        转内部成员
                    </Button>,
                    <Button key="link" type="primary" loading={state.modalButtonLoading} onClick={() => handleOk(false)}>
                        转外部成员
                    </Button>,
                ]}
            >
                {state.modalContent}
            </Modal> */}
        </SemiCard>
    );
}
